<template>
    

    <!-- <input type="file" @change="handleFileSelect"> -->
    <div class="chart-container" id="line">
        <el-button type="primary" @click="save">导出数据</el-button>
    <el-button type="primary" @click="read">导入数据</el-button>
    </div>
 
        
  
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import { setInterval } from 'core-js';
    export default{
        data () {
            return {
                createTime: ''
               
            }
        }
        ,
        mounted(){
           // 在页面加载完成后，初始化图表和获取数据
            this.initChart();

    },
    methods: {
        handleFileSelect(event) {
      // 获取用户选择的文件列表
      const selectedFiles = event.target.files;
      console.log(selectedFiles);
      const reader = new FileReader();
      reader.onload = (e) => {
          // 获取文件内容
          const fileContent = e.target.result;
          console.log('文件内容：', fileContent);
        };

      // 遍历文件列表
      for (let i = 0; i < selectedFiles.length; i++) {
        const file = selectedFiles[i];

            // 创建 FileReader 对象
            const reader = new FileReader();

            // 设置 FileReader 加载完成时的回调函数
            reader.onload = (e) => {
            // 获取文件内容
            const fileContent = e.target.result;
            var option = JSON.parse(fileContent)
            this.maychart.setOption(option);
            
        };

        // 读取文件内容
        reader.readAsText(file);
        
      }
    },
        initChart() {
            // 定义图表配置项
            this.options = {
                title: {
                text: '历史数据分析'
                },
                //设置鼠标悬停在数据点上时显示的提示框
                tooltip: {
                    trigger: 'axis'
                },
                //设置图例，用于展示不同数据系列的标签，
                legend: {
                    data: ['vid','pid','温度1', '温度2', '光照强度','故障警报']
                },
                //设置图表的网格，包括左侧边距、右侧边距、底部边距和是否包含标签等属性
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [7]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                {
                    name: 'vid',
                    type: 'line',
                    data: []
                    },
                    {
                    name: 'pid',
                    type: 'line',
                    data: []
                    },
                    {
                    name: '温度1',
                    type: 'line',
                    data: []
                    },

                    {
                    name: '温度2',
                    type: 'line',
                  
                    data: []
                    },
                    {
                    name: '光照强度',
                    type: 'line',
                  
                    data: []
                    },
                    {
                    name: '故障警报',
                    type: 'line',
                    data: []
                    },

                ]
            };
            // 初始化图表实例
            this.maychart = echarts.init(document.getElementById('line'));
            // 使用配置项初始化图表
            this.maychart.setOption(this.options);
        },  
        read(){
            axios.get("http://localhost:8080/input")
        },
        save(){
            var  option = this.maychart.getOption()
            var json = JSON.stringify(option)
            console.log(json);
            axios({
                    url:"http://localhost:8080/saveOption",
                    method:'post',
                    data:option
                })
        }
  },
  created () {
      // 使用 setInterval 设置定时器
      this.timer = setInterval(() => {
      // 定时向数据库中获取数据
      axios.get("http://localhost:8888/list").then((result)=>{
        console.log(result.data);
        for(let i = 0;i <result.data.data.length; i++){
            this.options.series[0].data[i] = result.data.data[i].vid;
            this.options.series[1].data[i] = result.data.data[i].pid;
            this.options.series[2].data[i] = result.data.data[i].tin;
            this.options.series[3].data[i] = result.data.data[i].tout;
            this.options.series[4].data[i] = result.data.data[i].lxin;
            this.options.series[5].data[i] = result.data.data[i].alarm;
            this.options.xAxis.data[i] = result.data.data[i].createTime.substring(0,10);
        }
            console.log(result);
        })
        this.maychart.setOption(this.options);
      console.log('定时器触发');
    }, 1000); // 每隔 1 秒执行一次
  }
};

</script>
<style>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>